<template>
  <view>

    <view class="newGoodsList" v-if="newList">
      <view class="listTop">
        <view class="text">今日主推</view>
      </view>
      <view class="goodsList">
        <view class="goodBox" v-for="(item,index) in goodlistData" :key="index"
              @click="$goURl(`/pages/commodity/details?id=${item.ID}`)">
          <view class="image">
            <image :src="item.index_img" mode="" v-if="item.index_img"></image>
            <image :src="item.img" mode="" v-else></image>
          </view>
          <view class="info">
            <view class="name">
              {{ item.name }}
            </view>
            <view class="title">
              <view class="left">{{ item.title }}</view>
              <view class="right">已售：{{ item.sales + item.virtually_sales }}</view>
            </view>
            <view class="bottom">
              <view class="price">{{ item.price }}
                <text style="font-size: 11px;margin-left: 5rpx;"
                      v-if="!item.is_single">
                  抵用券
                </text>
              </view>
              <view class="btn">
                <uni-icons type="cart" size="24" color="#fff"></uni-icons>
                <view class="text">购买</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <empty v-if="goodlistData.length==0" class="empty"></empty>
    </view>

    <view class="goodsListOne" v-else-if="type==1 && isshow">
      <view class="goodsItem" ref="goodsItem" v-for="(item,index) in goodlistData" :key="index"
            @click="gogoodsdetail(item.ID)">
        <view class="goodsImage">
          <image :src="item.img" mode="aspectFill"></image>
        </view>
        <view class="goodsDetail">
          <view class="goodsName textsl2">
            {{ item.name }}
          </view>
          <view class="titletxt textsl1">
            <view>{{ item.title }}</view>
          </view>
          <view class="bottomPrice">
            <view class="left">
              <view class="price">
                <text>{{ item.price }}</text>
              </view>
              <view class="money" v-if="goodData.options?goodData.options.originalPrice:true">
                {{ item.market }}
              </view>
            </view>
            <view class="btn" v-if="goodData.options?goodData.options.volumeStr:true">
              <view>{{ item.sales }}人付款</view>
              <view class="sold" v-if="goodData.options?goodData.options.goodRatio:true">库存:{{ item.stock }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="goodsList" v-else-if="type==2 && isshow">
      <view class="goodsItem" ref="goodsItem" v-for="(it,index) in goodlistData" :key="index"
            @click="gogoodsdetail(it.ID)">
        <view class="goodsImage">
          <image :src="it.img" mode="aspectFill"></image>
        </view>
        <view class="goodsDetail goodsDetail_L">
          <view class="goodsName textsl2">
            {{ it.name }}
          </view>
          <!--					<view class="titletxt textsl1">-->
          <!--						<view>{{it.title}}</view>-->
          <!--					</view>-->
          <view class="lsjf text_c_r text_4_20" v-if="it.discount>0">
            送{{getDiscountJf(it)}}资产积分
          </view>
          <view class="price l_f_r_sb_c" style="font-weight: bold;color: #F63B29;">
						<div>
							<text style="font-size: 20rpx;">￥</text>
							<text style="font-size: 36rpx;">{{ it.price }}</text>
						</div>
           <image @click.stop="bindChange(it)" src="https://img.fubaozx.cn/static/newImg/categoryImg2.png"
                   class="addImg"></image>
          </view>

        </view>
      </view>
    </view>
    <view v-else-if="type==3 && isshow" style="display: flex; justify-content: space-between;">
      <waterfall :goodData="goodData" :group="2" :list="goodlistData" :pageSize="pageSize"></waterfall>
      <!-- 	<view class="goodsLists" v-for="(its,i) in waterfall" :key="i">
        <view class="goodsItems" ref="goodsItem" v-for="(item,index) in listData" :key="index">
          <view class="goodsImage">
            <image :src="item.img" mode="aspectFill"></image>
          </view>
          <view class="goodsDetaithree ltyh ">
            <view class="goodsName ">
              {{item.name}}
            </view>
            <view class="bottomPrice">
              <view class="left">
                <view class="price">
                  <text>{{item.price}}</text>
                </view>
                <view class="money">
                  {{item.market}}
                </view>
              </view>
              <view class="btn">
                已售{{item.sales}}
              </view>
            </view>
          </view>
        </view>
      </view> -->
      <!-- 	<view class="l_waterfall">
        <view class="water_col" ref="water_col" v-for="(item, index) in group" :key="index"
          :id="`water_col_box_${index}`" :style="{ 'width': w, 'marginLeft': mar }">
          {{optimize}}
          <view class="water_col_block" v-for="(ite, ind) in optimize['column_' + index]" :key="ind">

            <image :src="ite.img" mode="widthFix" @load="emitHeight(ite, ind)" @error="emitHeight(ite, ind)">
            </image>
            <view class="t textsl2">
              {{ ite.name }}
            </view>
            <view class="t textsl2" style="color: #00C127;font-size: 12px;">
              获得绿积分：{{ Number(ite.price) * 4 * Number(ite.discount) / 100 }}
            </view>
            <view class="price">
              <view class="price1">
                <text>{{ $toFiexd(ite.price, 2) }}</text>
              </view>
              <view class="price2">
                {{ ite.sales }}人付款
              </view>
            </view>
            <view class="d" v-show="ite.business_id != 0">
              <image :src="ite.business.shop_head" mode=""></image>
              {{ ite.business.name }}
            </view>
          </view>
        </view>
      </view>
      <empty v-if="!optimize['column_0'].length"></empty> -->
    </view>
  </view>
</template>

<script>
import waterfall from './lj-waterfall.vue'

export default {
  // 翻滚
  name: "killGoodsList",
  components: {
    waterfall
  },
  props: {
    group: {
      type: Number,
      default: 2,
    },
    type: {
      type: Number,
      default: 1, //1：一排一个，2：一排两个 3 ：瀑布流
    },
    newList: {
      type: Boolean,
      default: false, //新版布局
    },
    goodData: {
      type: Object,
      default: () => {
      }
    },
    goodlistData: {
      type: Array,
      default: () => []
    },
    isIndex: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      waterfall: [
        [],
        []
      ],
      listData: [],
      isshow: true,
      page: 1,
      pageSize: 20,
    };
  },
  computed: {},
  watch: {},
  onload() {
  },
  mounted() {
    console.log(this.isIndex, "isIndex")
  },
  methods: {
    getDiscountJf(item) {
      if (item.discount > 0) {
        return ((Number(item.price)  * Number(item.discount/ 100) )).toFixed(4)
      } else {
        return 0
      }

    },
    shoppingCart(id) {
      let imd = ''
      if (typeof (id) != 'object') {
        imd = id
      } else {
        imd = data.speci
      }
      this.$request({
        url: `api/shoppingCart/`,
        method: 'POST',
        data: {
          attribute_id: imd,
          number: 1
        },
        success: (res) => {
          if (res.errno == 0) {
            uni.showToast({
              icon: 'none',
              title: '加入购物车成功'
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.errmsg
            })
          }

        }
      })
    },

    // 点击加入购物车图片
    bindChange(item,) {
      this.$request({
        url: `api/goods_list_all/0/`,
        method: 'POST',
        data: {
          id: item.ID
        },
        success: (res) => {
          if (res.errno == 0) {

            this.shoppingCart(res.data.attribute_list[0].ID)

          }
        }
      })
    },
    gogoodsdetail(id) {
      uni.navigateTo({
        url: '/pages/commodity/details?id=' + id
      })
    },
    gotosUrls(obj) {
      console.log(obj, "obj")
      if (obj.link == '') {
        // #ifndef  MP-WEIXIN
        uni.showToast({
          icon: 'none',
          title: '暂未开放'
        })
        return false;
        //  #endif
      }
      var Tab = Tab = ['pages/index/index', '/pages/personal/index', '/pages/goods/category']
      if (Tab.indexOf(obj.link) != -1) {
        uni.switchTab({
          url: obj.link
        })
        return
      }
          //暂时对外部链接不考虑
          //  else if (obj.link.indexOf("www") >= 0 || obj.link.indexOf("http") >= 0 || obj.link.indexOf("https") >= 0) {
          // 	uni.navigateTo({
          // 		url: `/pages/company/skip?url=${url}`
          // 	})
      // }
      else {
        if (obj.goodsType == 0) {
          uni.navigateTo({
            url: obj.link
          })
        } else if (obj.goodsType == 1) {
          uni.navigateTo({
            url: `/pages/commodity/details?id=${obj.link}`
          })
        } else if (obj.goodsType == 2) {
          uni.navigateTo({
            url: `/pages/commodity/seckill/seckillDetails?id=${obj.link}`
          })
        } else if (obj.goodsType == 3) {
          uni.navigateTo({
            url: `/pages/commodity/bargaining/groupBulist?id=${obj.link}`
          })
        } else if (obj.goodsType == 4) {
          uni.navigateTo({
            url: `/pages/commodity/bargaining/bargainingdetails?id=${obj.link}`
          })
        }
      }
    },

  },
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.newGoodsList {
  width: 100vw;
  // min-height: calc(100vh - 44px);
  background-color: #F5F5F5;

  .listTop {
    height: 100rpx;
    width: 100%;
    background-color: #0dd88a;
    border-radius: 15px 15px 0 0;
    z-index: 0;

    .text {
      display: flex;
      height: 80%;
      align-items: center;
      justify-content: flex-start;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding-left: 30rpx;
    }
  }

  .goodsList {
    width: 100%;
    height: 100%;
    // padding: 0;
    padding: 20rpx;
    z-index: 1;
    margin-top: -20rpx;
    background-color: #f5f7f9;
    border-radius: 10px;

    .goodBox {
      width: 100%;
      min-height: 440rpx;
      // padding: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10px;
      background-color: #fff;

      .image {
        width: 100%;
        height: 350rpx;
        border-radius: 5px;

        image {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .info {
        width: 100%;
        // height: 90rpx;
        // margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 20rpx;

        .name {
          width: 100%;
          // height: 100%;
          font-size: 16px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .title {
          display: flex;
          font-size: 14px;
          justify-content: space-between;

          .left {
            margin-top: 10rpx;
            width: 70%;
            color: #e37d2a;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
          }

          .right {
            margin-top: 10rpx;
            width: 30%;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-align: right;
          }

        }


        .bottom {
          width: 100%;
          height: 100%;
          text-align: center;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;

          .price {
            // width: 60%;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #ff5511;
          }

          .btn {
            width: 35%;
            height: 80%;
            text-align: center;
            font-size: 30rpx;
            font-weight: bold;

            display: flex;

            .uni-icons {
              width: 40%;
              text-align: center;
              font-size: 30rpx;
              line-height: 70rpx;
              font-weight: bold;
              color: #fff;
              background-color: #7ce177;
              border-radius: 25px 0 0 25px;
            }

            .text {
              width: 60%;
              text-align: center;
              font-size: 30rpx;
              line-height: 70rpx;
              font-weight: bold;
              color: #fff;
              background-color: #1fd28f;
              border-radius: 0 25px 25px 0;
            }
          }
        }
      }
    }
  }
}


.tibg {
  padding: 0px 10px;

  image {
    width: 100%;
  }
}

.goodsLists {
  // margin-top: 20rpx;
  width: calc(50% - 5px);

  .goodsItems {
    width: calc(100% - 20px);
    padding: 10px;
    margin-top: 20rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
    border-radius: 13px 13px 13px 13px;

    .goodsImage {
      width: 100%;
      height: 110px;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.goodsListOne {
  padding: 0 30rpx 30rpx 30rpx;

  .goodsItem {

    width: calc(100% - 20px);
    padding: 10px;
    margin-top: 20rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
    border-radius: 13px 13px 13px 13px;
    display: flex;

    .goodsImage {
      margin-right: 10px;
      width: 110px;
      height: 110px;

      image {
        width: 110px;
        height: 110px;
      }
    }

    .goodsDetail {
      height: 110px;

      .titletxt {
        font-size: 20rpx;
        color: #999;
      }
    }

    .bottomPrice {
      .left {
        display: block;

        .price {
          margin-bottom: 5rpx;
        }

        .money {
          font-size: 20rpx;
        }
      }

      .btn {
        color: #999;
        display: flex;

        .sold {
          color: #999;
          margin-left: 10rpx;
        }
      }
    }
  }
}

.goodsList {
  // margin-top: 20rpx;
  padding: 30rpx 30rpx 30rpx 30rpx;
  width: 100%;
  gap: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  .goodsItem:nth-child(odd) {
    margin-right: 1.5%;
    /* 奇数项右边距 */
  }

  .goodsItem:nth-child(even) {
    margin-left: 1.5%;
    /* 偶数项左边距 */
  }

  .goodsItem {
    width: 336rpx;
    height: 556rpx;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;

    .goodsImage {
      width: 100%;
      height: 344rpx;
      border-radius: 10rpx;

      image {
        border-radius: 10rpx;
        width: 100%;
        height: 344rpx;

      }
    }


  }
}

.goodsDetail {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .sold {
    color: #909090;
    font-size: 20rpx;
    display: flex;
    justify-content: flex-end;
  }

  .goodsName {
    font-weight: 500;
    font-size: 28rpx;
    color: #000000;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 10rpx;
		margin-bottom: 10rpx;
		min-height: 70rpx;
  }

  .titletxt {
    font-size: 20rpx;
    color: #999;
  }

  .bottomPrice {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .left {

      .price {
        font-weight: bold;
        font-size: 10px;
        color: #FF0034;
        text-align: left;
        font-style: normal;
        text-transform: none;

        text {
          font-size: 16px;
        }
      }

      .money {
        margin-left: 5px;
        font-weight: 500;
        font-size: 20rpx;
        color: #909090;
        text-align: left;
        font-style: normal;
        text-decoration-line: line-through;
        text-transform: none;
      }
    }

    .btn {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #999;
      text-align: left;
      font-style: normal;
      text-transform: none;
      align-items: left;
      margin-top: 10rpx;

      .kucun {
      }
    }
  }
}

//第三中
.goodsDetaithree {

  // display: flex;
  // justify-content: space-between;
  // flex-direction: column;

  .goodsName {
    font-weight: bold;
    font-size: 13px;
    color: #000000;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;

  }


  .bottomPrice {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .left {
      display: flex;
      align-items: flex-end;

      .price {
        font-weight: bold;
        font-size: 10px;
        color: #FF0034;
        text-align: left;
        font-style: normal;
        text-transform: none;

        text {
          font-size: 16px;
        }
      }

      .money {
        margin-left: 5px;
        font-weight: 500;
        font-size: 10px;
        color: #909090;
        text-align: left;
        font-style: normal;
        text-decoration-line: line-through;
        text-transform: none;
      }
    }

    .btn {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 10px;
      color: #CCCCCC;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}

uni-image {
  height: auto;
}

.l_waterfall {
  position: relative;

  .water_col {
    float: left;
  }
}

.water_col_block {
  margin: 0 10rpx;
  margin-bottom: 10rpx;
  border-radius: 20rpx;
  padding-bottom: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

  .t {
    font-size: 28rpx;
    font-weight: bold;
    color: #3D444D;
    width: 90%;
    padding: 0 5%;
    margin: 5% 0;
  }

  .price {
    padding: 0 5%;
    color: #FF4E00;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .price2 {
      color: #999;
      font-size: 20rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .d {
    width: 92%;
    font-size: 27rpx;
    color: #797979;
    padding: 4%;
    display: flex;
    align-items: center;

    image {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }

  image {
    display: block;
    width: 100%;
    border-radius: 6rpx;
  }
}

.goodsDetail_L {
  padding: 12rpx 18rpx;
  box-sizing: border-box;

  .lsjf {
    height: 36rpx;
    padding: 0 10rpx;
    margin: 5rpx 0;
    width: fit-content;
    background: #FFF5E5;
    border-radius: 4rpx;
  }

  .addImg {
    width: 36rpx;
    height: 36rpx;
  }
}

</style>
